<script setup lang="ts">
import { inject, ref } from 'vue'
import { DisplayMenu } from '@/components/home/type/DisplayMenu'

const menuStyle = ref([])
const items = ['图标', '文字']

const displayMenu = inject<Map<string, DisplayMenu>>('displayMenu')
const iconActive = displayMenu?.get('icon').active
const textActive = displayMenu?.get('text').active
const icon = displayMenu?.get('icon')
const text = displayMenu?.get('text')

if (iconActive) {
  menuStyle.value.push('图标')
}
if (textActive) {
  menuStyle.value.push('文字')
}

let lastItem = ''
const menuStyleChange = () => {
  if (menuStyle.value.length == 0) {
    menuStyle.value.push(lastItem)
    ElMessage.info('至少保留一个哦！')
  } else {
    if (menuStyle.value.indexOf('图标') >= 0) {
      icon.active = true
      displayMenu?.set('icon', icon)
    } else {
      icon.active = false
      displayMenu?.set('icon', icon)
    }
    if (menuStyle.value.indexOf('文字') >= 0) {
      text.active = true
      displayMenu?.set('text', text)
    } else {
      text.active = false
      displayMenu?.set('text', text)
    }
    lastItem = menuStyle.value[0]
  }
}
</script>

<template>
  <div class="panel">
    <section>
      <p>导航菜单样式</p>
      <p>
        <el-checkbox-group
          v-model="menuStyle"
          size="small"
          @change="menuStyleChange"
        >
          <el-checkbox-button v-for="item in items" :key="item" :label="item">
            {{ item }}
          </el-checkbox-button>
        </el-checkbox-group>
      </p>

      <el-divider style="margin: 10px 0" />
    </section>

    <section>
      <p>图标样式</p>
      <p>
        大小：
        <el-input v-model="displayMenu.get('icon').size" class="el-input" />
      </p>
      <p>
        颜色：
        <el-color-picker v-model="displayMenu.get('icon').color" />
      </p>
      <el-divider style="margin: 10px 0" />
    </section>
  </div>
</template>

<style scoped lang="less">
.panel {
  width: 100%;
  padding-left: 5px;
  background-color: white;

  section {
    p {
      margin-top: @marginTop;
      font-size: 14px;
    }
    p:first-of-type {
      font-size: 16px;
      font-weight: 600;
    }
    p:first-of-type ~ p {
      margin-left: @marginLeft;
    }
    p {
      :deep(.el-input) {
        width: max-content;
      }
    }
  }
}
</style>
